<template>
    <div class="app-container">
       <el-row>
    
        <!--:disabled="permission.indexOf('sys:menu:add') === -1" -->
      <el-button icon="el-icon-circle-plus" :disabled="permission.indexOf('sys:menu:add') === -1" style="margin: 5px 5px"  @click="showAddDialog" type="primary" size="small">添加</el-button>
      <el-table
      :data="tableData"
      row-key="id"
      border
      lazy
      style="width: 100%"
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
      <el-table-column
        prop="id"
        label="ID"
        width="100">
      </el-table-column>
      <el-table-column
        prop="title"
        label="名称"
        width="180">
      </el-table-column>
      <el-table-column
        prop="icon"
        label="图标"
        width="100">
        <template slot-scope="scope">
          <i :class="scope.row.icon" ></i>
        </template>
      </el-table-column>
      <el-table-column
        prop="type"
        label="类型">
        <template slot-scope="scope">
          <p v-if="scope.row.type==0">
              <el-tag>目录</el-tag>
          </p>
          <p v-else-if="scope.row.type==1">
              <el-tag type="success">菜单</el-tag>
          </p>
          <p v-else>
              <el-tag type="danger">按钮</el-tag>
          </p>
        </template>
      </el-table-column>
      <el-table-column
        prop="parentTitle"
        label="上级菜单"
        width="150">
      </el-table-column>
      <el-table-column
        prop="path"
        label="菜单url">
      </el-table-column>
      <el-table-column
        prop="perms"
        label="授权标识">
      </el-table-column>
      <el-table-column
        prop="orderNum"
        label="排序">
      </el-table-column>
      <el-table-column
        prop="name"
        label="菜单标识"
        width="180">
      </el-table-column>
      
      <el-table-column
        label="操作"
        width="220">
        <template slot-scope="scope">
  
          <!--  :disabled="permission.indexOf('sys:menu:edit') === -1" -->
              <el-button :disabled="permission.indexOf('sys:menu:edit') === -1"   @click="editUser(scope.row.id)" type="info" icon="el-icon-star-off" size="mini">编辑</el-button>
  
              <el-button :disabled="permission.indexOf('sys:menu:delete') === -1" @click="delUser(scope.row.id)" type="danger" icon="el-icon-delete" size="mini">删除</el-button>
            </template>
            <!-- :disabled="permission.indexOf('sys:menu:delete') === -1" -->
      </el-table-column>
    </el-table>
    <edit-menu-dialog @refresh="refresh" ref="editDialog"></edit-menu-dialog>
    <add-menu-dialog @refresh="refresh" ref="addDialog"></add-menu-dialog>
    
  
    </el-row>
  </div>
  </template>
  
  <script>
  import EditMenuDialog from '@/views/menu/EditMenuDialog.vue'
  import AddMenuDialog from '@/views/menu/AddMenuDialog.vue'
  import http from '@/utils/request.js'
  
  export default {
      components: {
        EditMenuDialog,
        AddMenuDialog
    },
      data() {
        return {
          permission: [],
          tableData: []
        }
      },
      mounted(){
        this.permission = this.$route.meta.permission
         this.goto()
      },
      methods:{
        goto(){
          http.get(`menu`).then(res=>{
            console.log(res)
          this.tableData  =  res   
         })
        },
        showAddDialog() {
          this.$refs.addDialog.addUserDialogVisible = true     
      },
      editUser(id) {
        // 调用子编辑模态框组件的根据id获取用户的方法
        this.$refs.editDialog.getById(id)
        // 让编辑模态框展示
        this.$refs.editDialog.editUserDialogVisible = true
      },
      async delUser(id) {
        try {
          await this.$confirm('你确定要删除这条数据吗?', '警告', {
            confirmButtonText: 'yes',
            cancelButtonText: 'no',
            closeOnClickModal: false,
            type: 'success'
          })
        
          await http.delete(`usermenu/${id}`)
          // 删除成功的提示消息
          this.$message({ message: '删除成功', type: 'success', duration: 1000})
          this.refresh()
        }catch(err) { // 
          console.log(err)
        }
      }, 
      refresh() {
        this.goto()
      }
      
      }
    }
  </script>
  
  <style>
  
  </style>